<?php
/**
 * @copyright  For copyright and license information, read the COPYING.txt file.
 * @link       /COPYING.txt
 * @license    Academic Free License (AFL 3.0)
 * @package     default_default
 */
?>
<?php
/**
 * Attribute options control
 *
 * @see Mage_Eav_Block_Adminhtml_Attribute_Edit_Options_Abstract
 * @var Mage_Eav_Block_Adminhtml_Attribute_Edit_Options_Abstract $this
 */
?>
<div>
<ul class="messages">
    <li class="notice-msg">
        <ul>
            <li><?php echo $this->__('If you do not specify an option value for a specific store view then the default (Admin) value will be used.') ?></li>
        </ul>
    </li>
</ul>
</div>

<div class="entity-edit">
    <div class="entry-edit-head">
        <h4 class="icon-head head-edit-form fieldset-legend"><?php echo $this->__('Manage Titles (Size, Color, etc.)') ?></h4>
    </div>
    <div class="box">
            <div class="hor-scroll">
            <table class="dynamic-grid" cellspacing="0" id="attribute-labels-table">
                <tr>
                <?php foreach ($this->getStores() as $_store): ?>
                    <th><?php echo $this->escapeHtml($_store->getName()); ?></th>
                <?php endforeach ?>
                </tr>
                <tr>
                    <?php $_labels = $this->getLabelValues() ?>
                    <?php foreach ($this->getStores() as $_store): ?>
                    <td>
                        <input class="input-text<?php if($_store->getId()==0): ?> required-option<?php endif ?>" type="text" name="frontend_label[<?php echo $_store->getId() ?>]" value="<?php echo $this->escapeHtml($_labels[$_store->getId()]); ?>"<?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/>
                    </td>
                    <?php endforeach ?>
                </tr>
            </table>
            </div>
    </div>
</div>
<br/>
<div class="entity-edit" id="matage-options-panel">
    <div class="entry-edit-head">
    <h4 class="icon-head head-edit-form fieldset-legend"><?php echo $this->__('Manage Options (values of your attribute)') ?></h4>
    </div>
    <div class="box">
        <div class="hor-scroll">
            <table class="dynamic-grid" cellspacing="0"  cellpadding="0">
                <tr id="attribute-options-table">
                    <?php if ($this->isConfigurableSwatchesEnabled()): ?>
                        <th><?php echo $this->escapeHtml($this->__('Swatch')) ?></th>
                    <?php endif ?>
                    <?php foreach ($this->getStores() as $_store): ?>
                        <th><?php echo $this->escapeHtml($_store->getName()); ?></th>
                    <?php endforeach ?>
                        <th><?php echo $this->__('Position') ?></th>
                        <th class="nobr a-center"><?php echo $this->escapeHtml($this->__('Is Default')) ?></th>
                        <th>
                            <?php if (!$this->getReadOnly()):?>
                                <?php echo $this->getAddNewButtonHtml() ?>
                            <?php endif ?>
                        </th>
                    </tr>
                    <tr class="no-display template" id="row-template">    
                        <?php if ($this->isConfigurableSwatchesEnabled()): ?>
                        <td style="position:relative">
                            <input type="hidden" disabled class="swatch-value" name="option[swatch][{{id}}]" value="{{swatch}}" />
                            <input type="color" class="input-color-html5 validate-hex-color-hash {{swatch_class}}" value="{{swatch}}" />
                            <span class="swatch-delete" data-msg-delete="<?php echo $this->escapeHtml($this->__('Are you sure to delete this fallback color?')) ?>">X</span>
                        </td>
                        <?php endif ?>
                        <?php foreach ($this->getStores() as $_store): ?>
                        <td><input name="option[value][{{id}}][<?php echo $_store->getId() ?>]" value="{{store<?php echo $_store->getId() ?>}}" class="input-text<?php if($_store->getId()==0): ?> required-option<?php endif ?>" type="text" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/></td>
                        <?php endforeach ?>
                        <td class="a-center"><input class="input-text" type="text" name="option[order][{{id}}]" value="{{sort_order}}" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/></td>
                        <td><input class="input-radio" type="radio" name="default[]" value="{{id}}" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/></td>
                        <td class="a-left">
                            <input type="hidden" class="delete-flag" name="option[delete][{{id}}]" value="" />
                            <?php if (!$this->getReadOnly()):?>
                                <?php echo $this->getDeleteButtonHtml() ?>
                            <?php endif ?>
                        </td>
                    </tr>
            </table>
        </div>
        <input type="hidden" id="option-count-check" value="" />
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
var optionDefaultInputType = 'radio';

// IE removes quotes from element.innerHTML whenever it thinks they're not needed, which breaks html.
var templateText =
        '<tr class="option-row" title="ID: {{id}}">'+
        <?php if ($this->isConfigurableSwatchesEnabled()): ?>
            '<td style="position:relative">'+
                '<input type="hidden" disabled class="swatch-value" name="option[swatch][{{id}}]" value="{{swatch}}" />'+
                '<input type="color" class="swatch-option input-color-html5 validate-hex-color-hash {{swatch_class}}" value="{{swatch}}" />'+
                '<span class="swatch-delete" data-msg-delete="<?php echo Mage::helper('core')->jsQuoteEscape($this->__('Are you sure to delete this fallback color?')); ?>">X</span>'+
            '</td>'+
        <?php endif ?>
<?php foreach ($this->getStores() as $_store): ?>
            '<td><input name="option[value][{{id}}][<?php echo $_store->getId() ?>]" value="{{store<?php echo $_store->getId() ?>}}" class="input-text<?php if($_store->getId()==0): ?> required-option<?php endif ?>" type="text" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/><\/td>'+
<?php endforeach ?>
            '<td><input class="input-text" type="text" name="option[order][{{id}}]" value="{{sort_order}}" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/><\/td>'+
            '<td class="a-center"><input class="input-radio" type="{{intype}}" name="default[]" value="{{id}}" {{checked}} <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/><\/td>'+
            '<td class="a-left" id="delete_button_container_{{id}}">'+
                '<input type="hidden" class="delete-flag" name="option[delete][{{id}}]" value="" />'+
                <?php if (!$this->getReadOnly()):?>
                    '<?php echo Mage::helper('core')->jsQuoteEscape($this->getDeleteButtonHtml()) ?>'+
                <?php endif ?>
            '<\/td>'+
        '<\/tr>';

var attributeOption = {
    table : document.getElementById('attribute-options-table'),
    templateSyntax : /(^|.|\r|\n)({{(\w+)}})/,
    templateText : templateText,
    itemCount : 0,
    totalItems : 0,
    isReadOnly: <?php echo (int)$this->getReadOnly(); ?>,
    add : function(data) {
        this.template = new Template(this.templateText, this.templateSyntax);
        let isNewOption = false;
        if (!data.id) {
            data.id = 'option_' + this.itemCount;
            isNewOption = true;
        }
        if (!data.intype) {
            data.intype = optionDefaultInputType;
        }
        if (!data.swatch) {
            data.swatch = '#ffffff';
            data.swatch_class = 'swatch-disabled';
        }
        let newHTML = this.template.evaluate(data);
        this.table.insertAdjacentHTML('afterend', newHTML);
        if (isNewOption && !this.isReadOnly) {
            this.enableNewOptionDeleteButton(data.id);
        }
        this.bindRemoveButtons();
        this.bindSwatchButtons();
        this.bindSwatchRemoveButtons();
        this.itemCount++;
        this.totalItems++;
        this.updateItemsCountField();
    },
    remove : function(event){
        let element = event.target.closest('tr');
        if (element) {
            let elementFlags = element.querySelectorAll('.delete-flag');
            if (elementFlags.length > 0) {
                elementFlags[0].value = 1;
            }

            element.classList.add('no-display', 'template');
            this.totalItems--;
            this.updateItemsCountField();
        }
    },
    swatch : function(event){
        let element = event.target.closest('tr');
        if (element) {
            let elementSwatchValue = element.querySelector('.swatch-value');
            if (elementSwatchValue) {
                elementSwatchValue.disabled = false;
                elementSwatchValue.value = event.target.value;
            }

            event.target.classList.remove('swatch-disabled');
        }
    },
    swatchremove : function(event){
        if (!confirm(event.target.getAttribute('data-msg-delete'))) {
            return;
        }
        let element = event.target.closest('tr');
        if (element) {
            let elementSwatchValue = element.querySelector('.swatch-value');
            if (elementSwatchValue) {
                elementSwatchValue.disabled = false;
                elementSwatchValue.value = '';
            }

            let elementSwatchOption = element.querySelector('.swatch-option');
            if (elementSwatchOption) {
                elementSwatchOption.value = '';
                elementSwatchOption.classList.add('swatch-disabled');
            }
        }
    },
    updateItemsCountField: function() {
        let optionCountCheck = document.getElementById('option-count-check');
        optionCountCheck.value = this.totalItems > 0 ? '1' : '';
    },
    enableNewOptionDeleteButton: function(id) {
        document.querySelectorAll('#delete_button_container_' + id + ' button').forEach(function(button) {
            button.disabled = false;
            button.classList.remove('disabled');
        });
    },
    bindRemoveButtons: function() {
        let buttons = document.querySelectorAll('.delete-option');
        buttons.forEach(function(button) {
            if (!button.binded) {
                button.binded = true;
                button.addEventListener('click', attributeOption.remove.bind(attributeOption));
            }
        });
    },
    bindSwatchButtons: function() {
        let buttons = document.querySelectorAll('.swatch-option');
        buttons.forEach(function(button) {
            if (!button.dataset.binded) {
                button.dataset.binded = true;
                button.addEventListener('change', attributeOption.swatch.bind(attributeOption));
            }
        });
    },
    bindSwatchRemoveButtons: function() {
        let buttons = document.querySelectorAll('.swatch-delete');
        buttons.forEach(function(button) {
            if (!button.binded) {
                button.binded = true;
                button.addEventListener('click', attributeOption.swatchremove.bind(attributeOption));
            }
        });
    }
}
let rowTemplate = document.getElementById('row-template');
if (rowTemplate) {
    rowTemplate.remove();
}
attributeOption.bindRemoveButtons();
let addNewOptionButton = document.getElementById('add_new_option_button');
if (addNewOptionButton) {
    addNewOptionButton.addEventListener('click', attributeOption.add.bind(attributeOption));
}
Validation.addAllThese([
    ['required-option', '<?php echo $this->jsQuoteEscape($this->__('Failed')) ?>', function(v) {
        return !Validation.get('IsEmpty').test(v);
}]]);
Validation.addAllThese([
    ['required-options-count', '<?php echo $this->jsQuoteEscape($this->__('Options is required')) ?>', function(v) {
        return !Validation.get('IsEmpty').test(v);
}]]);
<?php foreach ($this->getOptionValues() as $_value): ?>
    attributeOption.add(<?php echo $_value->toJson() ?>);
<?php endforeach ?>
//]]>
</script>
